<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>结算页</title>
    <link rel="stylesheet" type="text/css" href="http://static.xiaohong.work/css/all.css" />
    <link rel="stylesheet" type="text/css" href="http://static.xiaohong.work/css/pages-getOrderInfo.css" />
	<style>
		.addAddressForm input {
			width: 250px;
			margin-top: 5px;
			margin-bottom: 5px;
		}
		.addAddressForm span {
			width: 100px;
			text-align: center;
			height: 35px;
			line-height: 35px;
		}
	</style>
</head>

<body>
<div id="app">
	<!--head-->
	<!-- 头部栏位 -->
	<!--页面顶部-->
	<div>
		<top/>
	</div>


	<div class="cart py-container">
		<!--主内容-->
		<div class="checkout py-container">
			<div class="checkout-tit">
				<h4 class="tit-txt">填写并核对订单信息</h4>
			</div>
			<div class="checkout-steps">
				<!--收件人信息-->
				<div class="step-tit">
					<h5>收件人信息<span></span></h5>
				</div>
				<div class="step-cont">
					<div class="addressInfo">
						<!--地址列表-->
						<ul class="addr-detail" v-for="(as,index) in addressList" :key="index">
							<li class='addr-item' @click="check = index">
								<div class="choose-address" @click="changAddress(as,index)" >
									<div class="con name" :class="{selected:(index === check)}"><a v-text="as.name"><span title="点击取消选择"></span></a></div>
									<div class="con address">
										<span class="place" v-text="as.address"></span>
										<span class="phone" v-text="as.phone"></span>
										<span class="base" v-show="as.isOften === '1'">默认地址</span>
									</div>
									<div class="clearfix"></div>
								</div>
							</li>
						</ul>
						 <!--新增地址-->
						<a v-show="!addAddressVisiable" @click="addAddressVisiable =  true" style="line-height: 30px;text-decoration: none">
							<div
								 style="border: 1px solid #ff713f;width: 95px;height: 30px;margin-bottom: 5px;text-align: center">
								添加一个新地址
							</div>
						</a>
						<form v-show="addAddressVisiable" class="addAddressForm">
							<span>收货人： </span>
							<input style="width: 165px;height: 15px" v-model="addressForm.name" placeholder="收件人"><br>
							<span>收件手机号： </span>
							<input type="text" v-model="addressForm.phone" placeholder="收件手机号"><br>
<!--							<span>所在地区： </span>-->
<!--							<select>-->
<!--								<option value="volvo">Volvo</option>-->
<!--								<option value="saab">Saab</option>-->
<!--								<option value="opel">Opel</option>-->
<!--								<option value="audi">Audi</option>-->
<!--							</select>-->
<!--							<select>-->
<!--								<option value="volvo">Volvo</option>-->
<!--								<option value="saab">Saab</option>-->
<!--								<option value="opel">Opel</option>-->
<!--								<option value="audi">Audi</option>-->
<!--							</select>-->
<!--							<select>-->
<!--								<option value="volvo">Volvo</option>-->
<!--								<option value="saab">Saab</option>-->
<!--								<option value="opel">Opel</option>-->
<!--								<option value="audi">Audi</option>-->
<!--							</select>-->
<!--							<br>-->
							<span>详细地址： </span>
							<textarea v-model="addressForm.address"></textarea>
							<br>
							<span>设为默认地址： </span>
							是：<input v-model="addressForm.isOften" type="radio" value="1" style="width: 50px">
							否：<input v-model="addressForm.isOften" type="radio" value="0" style="width: 50px"><br>
							<button @click="addAddress" class="btn-xlarge btn-danger" type="button">保存</button>
						</form>
					</div>
				</div>
				<div class="hr"></div>
				<!--支付和送货-->
				<div class="payshipInfo">
					<div class="step-tit">
						<h5>支付方式</h5>
					</div>
					<div class="step-cont">
						<ul class="payType">
							<li class="selected">在线支付<span title="点击取消选择"></span></li>
							<li>货到付款<span title="点击取消选择"></span></li>
						</ul>
					</div>
					<div class="hr"></div>
					<div class="step-tit">
						<h5>送货清单</h5>
					</div>
					<div class="step-cont">
						<ul class="send-detail">
							<li>
								<div class="sendType">
									<span>配送方式：</span>
									<ul>
										<li>
											<div class="con express">天天快递</div>
											<div class="con delivery">配送时间：预计8月10日（周三）09:00-15:00送达</div>
										</li>
									</ul>
								</div>
								<span>商品清单：</span>
								<div class="sendGoods" v-for="(item,index) in choiceList" :key="index">
									<ul class="yui3-g" >
										<li class="yui3-u-1-6">
											<span><img :src="item.image" width="70px" height="70px"/></span>
										</li>
										<li class="yui3-u-7-12">
											<div class="desc" v-text="item.name"> </div>
											<div class="seven">7天无理由退货</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="price">￥<span v-text="item.price"></span></div>
										</li>
										<li class="yui3-u-1-12">
											<div class="num">X<span v-text="item.num"></span></div>
										</li>
										<li class="yui3-u-1-12">
											<div class="exit">有货</div>
										</li>

									</ul>
								</div>
								<div class="buyMessage">
									<span>买家留言：</span>
									<textarea placeholder="建议留言前先与商家沟通确认" class="remarks-cont" v-model="orderForm.buyerMessage"></textarea>
								</div>
							</li>
							<li></li>
							<li></li>
						</ul>
					</div>
					<div class="hr"></div>
				</div>

				<div class="linkInfo">
					<div class="step-tit">
						<h5>发票信息</h5>
					</div>
					<div class="step-cont">
						<span>普通发票（电子）</span>
						<span>个人</span>
						<span>明细</span>
					</div>
				</div>
				<div class="cardInfo">
					<div class="step-tit">
						<h5>使用优惠/抵用</h5>
					</div>
				</div>
			</div>
		</div>
		<div class="order-summary">
			<div class="static fr">
				<div class="list">
					<span><i class="number" v-model="orderForm.totalNum"></i>件商品，总商品金额</span>
					<span>¥<em v-text="orderForm.totalMoney"></em></span>
				</div>
				<div class="list">
					<span>返现：</span>
					<em class="money" v-text="orderForm.preMoney"> </em>
				</div>
				<div class="list">
					<span>运费：</span>
					<em class="transport" v-text="orderForm.postFee"></em>
				</div>
			</div>
		</div>
		<div class="clearfix trade">
			<div class="fc-price">应付金额:　<span class="price">¥<span v-text="orderForm.payMoney"></spanv-text></span></div>
			<div class="fc-receiverInfo">
				寄送至:
				<span id="receive-address" v-text="orderForm.receiverAddress"></span>
				收货人：<span id="receive-name" v-text="orderForm.receiverContact"></span>
				<span id="receive-phone" v-text="orderForm.receiverMobile"></span>
			</div>
		</div>
		<div class="submit" @click="getPay">
			<a class="sui-btn btn-danger btn-xlarge">提交订单</a>
		</div>
	</div>
	<!-- 底部栏位 -->
	<!--页面底部-->
	<div>
		<end/>
	</div>
</div>
<!--页面底部END-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>

	<!-- 引入vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
	<script src="http://static.xiaohong.work/js/axios.min.js"></script>
	<script src="http://static.xiaohong.work/js/common.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					choiceList: [],  //商品列表
					addressList: [], //地址列表
					addressForm: { // 添加地址表单
						userId: JSON.parse(window.localStorage.getItem('user')).id, // 用户id
						name: '', // 收件人
						phone: '', // 收件手机号
						address: '', // 收件地址
						isOften: 0 // 是否为默认地址
					},
					addAddressVisiable: false, // 添加地址展示开关
					orderForm: {
						totalNum: 0,  //数量合计
						totalMoney: 0, //金额合计
						preMoney: 0, //优惠金额
						postFee: 0, //邮费
						payMoney: 0, //实付金额
						payType: 0, //支付类型
						username: JSON.parse(window.localStorage.getItem('user')).nickName, //用户名称
						buyerMessage: '无', //买家留言
						receiverContact: '', //收货人
						receiverMobile: '', //收货人手机号
						receiverAddress: '', // 收货人地址
						sourceType: 1, // 订单来源
						orderItems: [] // 子订单集合
					},
					check: -1, //选中地址行
					user: JSON.parse(window.localStorage.getItem('user')),
				}
			},
			created: function () {
				this.getShop();
				this.getAddress();
				for (let i = 0; i <this.choiceList.length; i++) {
					this.orderForm.totalMoney += this.choiceList[i].money;
					this.orderForm.payMoney += this.choiceList[i].payMoney;
					this.orderForm.totalNum += this.choiceList[i].num;
				}
			},
			methods: {
				getShop() {
					this.choiceList = xiaohong.store.get("Cars");
					if (this.choiceList === null || this.choiceList.length === 0){
						alert('购买商品为空！请先添加商品')
						window.location = 'http://www.xiaohong.work/cart.html';
					}
				},
				// 添加地址
				addAddress(){
					xiaohong.http.post('/userAddress',this.addressForm).then(async resp => {
						if(resp.data.code === 20000){
							// 重新查询收货信息
							this.getAddress()
							// 关闭添加地址表单
							this.addAddressVisiable = false
						}
					}).catch(() => alert('添加收货信息失败'));
				},
				// 获取地址
				async getAddress(){
					await xiaohong.http.get('/userAddress').then(async resp => {
						if(resp.data.code === 20000){
							this.addressList = resp.data.data;
							let flag = 0;
							this.addressList.forEach(address => {
								if (address.isOften === "1") {
									this.check = flag;
									this.orderForm.receiverAddress = address.address;
									this.orderForm.receiverContact = address.name;
									this.orderForm.receiverMobile = address.phone;
								}
								flag ++;
							})
						}
					}).catch(() => alert('获取收货信息失败'));
				},
				// 选择切换地址
				changAddress(as,index){
					this.orderForm.receiverAddress = as.address;
					this.orderForm.receiverContact = as.name;
					this.orderForm.receiverMobile = as.phone;
					console.log(index);
					this.check = index;
				},
				//提交订单
				async getPay(){
					//判断信息是否填写齐全
					if (this.orderForm.receiverContact !== '' && this.orderForm.receiverMobile !== '' && this.orderForm.receiverAddress !== ''){
						//提交订单
						this.orderForm.orderItems = this.choiceList;
						await xiaohong.http.post('/order',this.orderForm).then(async resp => {
							if(resp.data.code === 20000){
								console.log('添加商品成功！');
								//清空本地存储选中商品
								xiaohong.store.set("Cars", []);
								//跳转到支付界面
								window.location = "http://www.xiaohong.work/pay.html?orderId=" + resp.data.data;
							}
						}).catch(() => alert('添加商品失败'));
					}else {
						alert('请选择收货信息！');
					}

				}
			},
			components: {
				top: () => import("http://static.xiaohong.work/js/pages/top.js"),
				end: () => import("http://static.xiaohong.work/js/pages/end.js")
			}
		})
	</script>

</body>

</html>
